<template>
  <div class="bg-white">
    <div class="w m-auto py-[60px] flex gap-[16px] relative">
      <div class="w-[350px] sticky top-[100px] h-fit menu">
        <n-collapse default-expanded-names="1" accordion>
          <n-collapse-item
            v-for="item in menuOptions"
            :title="item.title"
            :name="item.title"
          >
            <div
              class="item cursor-pointer text-[16px] font-[300] py-[6px] pl-[24px]"
              :class="artical.title === title ? 'active' : ''"
              v-for="artical in item.children"
              :key="artical.title"
              @click="handleClick(artical)"
            >
              {{ artical.title }}
            </div>
          </n-collapse-item>
        </n-collapse>
      </div>
      <div class="flex-1 w-0 min-h-[600px]">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
const menuOptions = [
  {
    title: "Acerca de nosotros",
    children: [
      {
        title: "Acerca de Alib2b",
      },
      {
        title: "Presentamos Alib2b",
      },
      {
        title: "¿Por qué nace Alib2b?",
      },
      {
        title: "OEM/ODM",
      },
    ],
  },
  {
    title: "Las reglas de la logística y la distribución",
    children: [
      {
        title: "Envío internacional",
      },
      {
        title: "Transporte Aéreo",
      },
      {
        title: "Pérdida y/o extravío de mercancías durante el transporte",
      },
      {
        title: "Política de transporte nacional en México",
      },
      {
        title: "Política de empaque, envase y embalaje",
      },
      {
        title: "Política de almacenamiento",
      },
      {
        title: "Política de importación",
      },
      {
        title: "Política de inspección",
      },
    ],
  },
  {
    title: "Políticas y reglas de la plataforma",
    children: [
      {
        title: "Política de términos y condiciones de pago",
      },
      {
        title: "Política de retención de datos",
      },
      {
        title: "Política de Quejas",
      },
      {
        title: "Política de reclamaciones",
      },
    ],
  },
];
const router = useRouter();
const route = useRoute();
const title = ref("");
const handleClick = (artical) => {
  title.value = decodeURIComponent(artical.title);
  router.push(`/artical/content/${encodeURIComponent(artical.title)}`);
};

onMounted(() => {
  if (!route.params.key) {
    handleClick(menuOptions[0].children[0]);
  } else {
    title.value = decodeURIComponent(route.params.key);
  }
});
</script>

<style lang="scss" scoped>
.menu {
  ::v-deep(.n-collapse-item__header-main) {
    font-size: 18px;
  }
}
.item {
  transition: all 0.3s ease-in-out;
  &:hover {
    padding-left: 36px;
    color: var(--main-color);
  }
}
.active {
  color: var(--main-color);
}
</style>
